<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 实现响应式，支持移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <title>三种容器示例</title>
    <script src="../bootstrap-4.3.1-dist/js/jquery-1.7.2.js"></script>
    <script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="../bootstrap-4.3.1-dist/js/popper.js"></script>
    <style>
        /*超小屏幕*/
        @media (max-width: 575px) {
            .container-self{
                background-color: red;
                width: 100%;
            }
        }

        /*小屏幕*/
        @media (min-width: 576px) and (max-width: 767px){
            .container-self{
                background-color: green;
                width: 540px;
            }
        }

        /*中等屏幕*/
        @media (min-width: 768px) and (max-width: 991px){
            .container-self{
                background-color: blue;
                width: 720px;
            }
        }

        /*大屏幕*/
        @media (min-width: 992px) and (max-width: 1199px){
            .container-self{
                background-color: purple;
                width: 960px;
            }
        }

        /*超大屏幕*/
        @media (min-width: 1200px){
            .container-self{
                background-color: goldenrod;
                width: 1140px;
            }
        }
    </style>
</head>
<body>

    <div class="container" style="background-color: red;height: 100px">
        <h3>流体容器;有几个挡位，会根据屏幕大小自动调整自身大小的挡位，直到最小;属于响应式容器;</h3>
    </div>
    <div class="container-fluid" style="background-color: pink ; height: 100px ; margin-top: 100px ; margin-bottom: 100px;">
        <h3>container-fluid:固体容器;不会自动根据屏幕大小自动调整自身大小;</h3>
    </div>
    <div class="container-self" style="height: 100px; margin: 0 auto;">
        自定义容器
    </div>
</body>
</html>